<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Basic_animations#%E9%BC%A0%E6%A0%87%E8%BF%BD%E8%B8%AA%E5%8A%A8%E7%94%BB</title>
  <script>
    var cn;
    var c;
    var u = 10;
    const m = {
      x: innerWidth / 2,
      y: innerHeight / 2
    };
    window.onmousemove = function(e) {
      m.x = e.clientX;
      m.y = e.clientY;

    }

    function gc() {
      var s = "0123456789ABCDEF";
      var c = "#";
      for (var i = 0; i < 6; i++) {
        c += s[Math.ceil(Math.random() * 15)]
      }
      return c
    }
    var a = [];
    window.onload = function myfunction() {
      cn = document.getElementById('cw');
      c = cn.getContext('2d');

      for (var i = 0; i < 10; i++) {
        var r = 30;
        var x = Math.random() * (innerWidth - 2 * r) + r;
        var y = Math.random() * (innerHeight - 2 * r) + r;
        var t = new ob(innerWidth / 2, innerHeight / 2, 5, "red", Math.random() * 200 + 20, 2);
        a.push(t);
      }
      //cn.style.backgroundColor = "#700bc8";

      c.lineWidth = "2";
      c.globalAlpha = 0.5;
      resize();
      anim()
    }
    window.onresize = function() {

      resize();

    }

    function resize() {
      cn.height = innerHeight;
      cn.width = innerWidth;
      for (var i = 0; i < 101; i++) {
        var r = 30;
        var x = Math.random() * (innerWidth - 2 * r) + r;
        var y = Math.random() * (innerHeight - 2 * r) + r;
        a[i] = new ob(innerWidth / 2, innerHeight / 2, 4, gc(), Math.random() * 200 + 20, 0.02);

      }
      //  a[0] = new ob(innerWidth / 2, innerHeight / 2, 40, "red", 0.05, 0.05);
      //a[0].dr();
    }

    function ob(x, y, r, cc, o, s) {
      this.x = x;
      this.y = y;
      this.r = r;
      this.cc = cc;
      this.theta = Math.random() * Math.PI * 2;
      this.s = s;
      this.o = o;
      this.t = Math.random() * 150;

      this.o = o;
      this.dr = function() {
        const ls = {
          x: this.x,
          y: this.y
        };
        this.theta += this.s;
        this.x = m.x + Math.cos(this.theta) * this.t;
        this.y = m.y + Math.sin(this.theta) * this.t;
        c.beginPath();
        c.lineWidth = this.r;
        c.strokeStyle = this.cc;
        c.moveTo(ls.x, ls.y);
        c.lineTo(this.x, this.y);
        c.stroke();
        c.closePath();

      }
    }

    function anim() {
      requestAnimationFrame(anim);
      c.fillStyle = "rgba(0,0,0,0.05)";
      c.fillRect(0, 0, cn.width, cn.height);
      a.forEach(function(e, i) {
        e.dr();
      });

    }
  </script>
  <style>
    #cw {
      position: fixed;
      z-index: -1;
    }

    body {
      margin: 0;
      padding: 0;
      background-color: rgba(0, 0, 0, 0.05);
    }
  </style>
</head>

<body>
  <canvas id="cw"></canvas>
</body>

</html>